<template>
  <div class="clubDetail">
    <h2>基本信息</h2>
    <div class="clubDetail-content">
      <div class="clubDetail-content-item">
        <div class="clubDetail-content-item-title">
          <h3>社团名称：</h3>
        </div>
        <div class="clubDetail-content-item-value">
          <p>{{detailData.clubName}}</p>
        </div>
      </div>
      <div class="clubDetail-content-item">
        <div class="clubDetail-content-item-title" style="align-self: flex-start;">
          <h3>社团描述：</h3>
        </div>
        <div class="clubDetail-content-item-value">
          <p>{{detailData.clubDesc}}</p>
        </div>
      </div>
      <div class="clubDetail-content-item">
        <div class="clubDetail-content-item-title">
          <h3>成员：</h3>
          <div class="clubDetail-content-addMember" @click="isAddMemberShow=true">
            <van-icon class-prefix="aliIconfont" size="30px" name="icon-tianjia"/>
          </div>
        </div>
        <div class="clubDetail-content-item-value" style="max-height: 100px;border-left: 2px solid #FFD260;">
          <div class="clubDetail-content-item-value-author" v-for="(item,index) in detailData.clubMemberInfo" :key="index">
            <div>
              <van-image round width="100%" height="100%" :src="item.userImgUrl"/>
            </div>
            <span>{{item.userName}}</span>
            <span class="clubMemberDel" @click="delMember(item._id)">×</span>
          </div>
        </div>
      </div>
      <div class="clubDetail-content-item">
        <div class="clubDetail-content-item-title">
          <h3>创建时间：</h3>
        </div>
        <div class="clubDetail-content-item-value">
          <p>{{detailData.date}}</p>
        </div>
      </div>
    </div>
    <h2>活动</h2>
    <div class="clubDetail-activity">
      <ActivityCard
        v-for="(item,index) in activity"
        :key="index"
        :activityCover="item.coverUrl"
        :content="item.content"
        :club="item.club"
        :positionDetail="item.positionDetail"
        :startTime="item.startTime"
        :endTime="item.endTime"
        size="big"
      />
    </div>
    <div class="clubDetail-addActivity" @click="isAddShow = true">
      发布活动
    </div>
    <div>
      <van-dialog v-model:show="isAddShow" title="发布活动" :show-confirm-button="false" show-cancel-button>
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field name="activityCover" label="封面">
              <template #input>
                <van-uploader v-model="activityCover" 
                  max-count="1"
                />
              </template>
            </van-field>
            <van-field
              v-model="activityContent"
              type="textarea"
              name="activityContent"
              label="内容"
              placeholder="内容"
              :rules="[{ required: true, message: '请填写活动内容' }]"
            />
            <van-field
              v-model="activityPosition"
              is-link
              readonly
              name="activityPosition"
              label="地区选择"
              placeholder="点击选择省市区"
              @click="showArea = true"
            />
            <van-field
              v-model="activityPositionDetail"
              name="activityPositionDetail"
              label="详细地址"
              placeholder="详细地址"
              type="text"
            />
            <van-field
              v-model="activityStartTime"
              type="text"
              name="activityStartTime"
              label="开始时间"
              placeholder="开始时间"
              :rules="[{ required: true, message: '请填写开始时间' }]"
            />
            <van-field
              v-model="activityEndTime"
              type="text"
              name="activityEndTime"
              label="结束时间"
              placeholder="结束时间"
              :rules="[{ required: true, message: '请填写结束时间' }]"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </van-dialog>
      <van-popup v-model:show="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
        />
      </van-popup>

      <van-dialog v-model:show="isAddMemberShow" title="添加成员" :show-confirm-button="false" show-cancel-button>
        <van-search
          v-model="serachMember"
          show-action
          placeholder="输入用户名"
          @search="onSearch"
        >
          <template #action>
            <van-button @click="handleSearch">搜索</van-button>
          </template>
        </van-search>
        <div class="searchResult" v-if="searchResult.userName">
          <van-image round width="40px" height="40px" :src="searchResult.userImgUrl"/>
          <span style="margin-left: 8px;">{{searchResult.userName}}</span>
          <div class="searchResult-button" @click="handleSeachButton">
            <div>添加</div>
          </div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>
<script>
import {Button,Image as VanImage, Toast,Icon, Dialog,Form,Field,CellGroup,Uploader,Area,Popup,Search} from "vant";
import { areaList } from "@vant/area-data";
import { addMember,checkLogin,getActivity,addActivity,getUserDataByName,appendMember,removeMember } from "@/service/user.js";
import ActivityCard from "@/components/ActivityCard";
export default {
  setup(){
    return { areaList }
  },
  props:['detailData'],
  components:{
    [Button.name]:Button,
    [VanImage.name]:VanImage,
    [Icon.name]:Icon,
    [Dialog.Component.name]:Dialog.Component,
    [Form.name]:Form,
    [Field.name]:Field,
    [CellGroup.name]:CellGroup,
    [Uploader.name]:Uploader,
    [Area.name]:Area,
    [Popup.name]:Popup,
    [Search.name]:Search,
    ActivityCard
  },
  mounted(){
    checkLogin().then(res=>{
      this.isJoin = this.detailData.clubMember.filter(item=>item == res.userInfo._id).length != 0
    })
    getActivity().then(res=>{
      this.activity = res.filter(item=>item.clubId == this.detailData._id);
    })
  },
  data(){
    return {
      isAddShow:false,
      isAddMemberShow:false,
      isJoin:false,
      showArea:false,
      activityCover:[],
      activityContent:"",
      activityStartTime:"",
      activityEndTime:"",
      activityPosition:"",
      activityPositionDetail:"",
      activity:[],
      serachMember:"",
      searchResult:{}
    }
  },
  methods:{
    joinClub(id){
      addMember(id).then(res=>{
        res.status == 200 ? Toast.success(res.message) : Toast.fail('加入失败');
        this.$emit('handleJoinSuccess',this.detailData._id)
      })
    },
    onSubmit(val){
      let myGeo = new BMap.Geocoder();
      let that = this;
      myGeo.getPoint(val.activityPosition + val.activityPositionDetail,function(point){
        if(point){
          addActivity({
            id:that.detailData._id,
            coverUrl:val.activityCover[0],
            content:val.activityContent,
            startTime:val.activityStartTime,
            endTime:val.activityEndTime,
            position:point,
            positionDetail:val.activityPosition + val.activityPositionDetail
          }).then(res=>{
            console.log(res);
            res.status == 200 ? Toast.success(res.message) : Toast.fail('发布失败');
            that.isAddShow = false;
            that.activityCover = [];
            that.activityContent = "";
            that.activityPosition = "";
            that.activityPositionDetail = "";
            that.activityStartTime = "";
            that.activityEndTime = "";
            getActivity().then(res=>{
              let totalData = res.filter(item=>item.clubId == that.detailData._id)
              that.activity = totalData;
            })
          })
        }
      })
    },
    onConfirm(val){
      this.activityPosition = val.map(item=>item.name).join('/');
      this.showArea = false;
    },
    onSearch(val){
    },
    handleSearch(){
      getUserDataByName(this.serachMember).then(res=>{
        this.searchResult = res;
      })
    },
    handleSeachButton(){
      appendMember(this.detailData._id,this.searchResult._id).then(res=>{
        res.status == 200 ? Toast.success(res.message) : Toast.success('加入失败');
        location.reload();
      })
    },
    delMember(id){
      removeMember(this.detailData._id,id).then(res=>{
        res.status == 200 ? Toast.success('删除成功') : Toast.success('加入失败');
        location.reload();
      })
    }
  },
  watch:{
    detailData(){
      checkLogin().then(res=>{
        this.isJoin = this.detailData.clubMember.filter(item=>item == res.userInfo._id).length != 0
      })
      getActivity().then(res=>{
        let totalData = res.filter(item=>item.clubId == this.detailData._id)
        this.activity = totalData;
      })
    }
  }
}
</script>
<style lang="less">
.clubDetail{
  height:calc(100vh - 50px);
  overflow-y:auto;
  margin-top: 50px;
  h2{
    padding: 0;
    margin:0;
    text-align: left;
    margin: 4px 20px;
    color: orange;
  }
  .clubDetail-content{
    .clubDetail-content-item{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 20px;
      >div{
        text-align: left;
        padding-left: 8px;
        margin: 8px 0;
        &:nth-child(1){
          width: 104px;
          border-left: 3px solid orange;
        }
        &:nth-child(2){
          flex: 1;
          max-height: 70px;
          word-break: break-all;
          overflow-y: auto;
          .clubDetail-content-item-value-author{
            display: flex;
            align-items: center;
            background: linear-gradient(89deg, #00000040, transparent);
            border-radius: 20px;
            margin: 4px 0;
            &:nth-child(1){
              margin: 0;
            }
            >div{
              width: 40px;
              height: 40px;
              margin-right: 8px;
            }
          }
        }
      }
      h3,p{
        padding: 0;
        margin: 0;
      }
    }
  }
  .clubDetail-activity{
    margin: 0 20px;
    border: 1px solid orange;
  }
  .clubDetail-addActivity{
    margin: 0 20px;
    margin-bottom: 8px;
    border: 1px solid orange;
    border-top: 0;
    color:orange;
    padding:12px 0;
  }
  .clubDetail-join{
    padding: 12px 0;
  }
  .clubMemberDel{
    color: red;
    flex: 1;
    text-align: right;
    padding-right: 20px;
    font-size: 25px;
  }
  .clubDetail-content-item-title{
    position: relative;
  }
  .clubDetail-content-addMember{
    position: absolute;
    right: 16px;
    top: 50%;
    transform:translateY(-50%);
    color: orange;
  }
  .searchResult{
    display: flex;
    align-items: center;
    margin: 0 20px;
    .searchResult-button{
      flex:1;
      >div{
        float: right;
        width: 58px;
        height: 30px;
        background: orange;
        line-height: 30px;
        text-align: center;
        color: white;
        border-radius: 10px;
      }
    }
  }

}
</style>